<script setup lang="ts">
import type { Student } from '@/hooks/class/useClassManagement'
import { computed, ref, toRef } from 'vue'
import ScrollContainer from '@/components/common/ScrollContainer.vue'
import Select from '@/components/common/Select.vue'
import TextInput from '@/components/common/TextInput.vue'
import { useStudentManagement } from '@/hooks/class/useStudentManagement'

const props = defineProps<{
  classId: string
  students: Student[]
}>()

const emit = defineEmits<{
  (e: 'update:students', students: Student[]): void
}>()

const studentsRef = computed({
  get: () => props.students,
  set: value => emit('update:students', value),
})

const classIdRef = toRef(props, 'classId')

const { handleRemoveStudent } = useStudentManagement(classIdRef, studentsRef)
const filterNameString = ref('')
const filterPhoneString = ref('')
const filterGender = ref('')
const filteredStudents = computed(() => {
  if (!filterNameString.value && !filterPhoneString.value && !filterGender.value)
    return studentsRef.value
  return studentsRef.value.filter(student =>
    student.name.includes(filterNameString.value)
    && student.phone.includes(filterPhoneString.value)
    && student.gender === filterGender.value,
  )
})
</script>

<template>
  <div class="card-area">
    <div class="card-header">
      班级学生管理
    </div>
    <div class="filter-options">
      <TextInput v-model.lazy="filterNameString" label="姓名:" placeholder="输入姓名以筛选" />
      <TextInput v-model.lazy="filterPhoneString" label="手机号:" placeholder="输入手机号以筛选" />
      <Select
        v-model="filterGender" label="性别:" placeholder="全部性别" :options="[
          { label: '全部性别', value: '' },
          { label: '男', value: 'male' },
          { label: '女', value: 'female' },
        ]"
      />
    </div>
    <ScrollContainer>
      <div v-for="student in filteredStudents" :key="student.sid" class="student-item">
        <span class="student-name">{{ student.name }}</span>
        <span class="student-phone">{{ student.phone }}</span>
        <span class="student-gender">
          {{ student.gender === 'male'
            ? '男'
            : (student.gender === 'female'
              ? '女'
              : '-')
          }}
        </span>
        <div class="operations">
          <button class="remove-btn" @click="handleRemoveStudent(student)">
            移除
          </button>
        </div>
      </div>
      <div v-if="filteredStudents.length === 0" class="empty-state">
        暂无学生
      </div>
    </ScrollContainer>
  </div>
</template>

<style scoped>
.filter-options {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  letter-spacing: -0.06em;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.student-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 100px;
  padding: 12px;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.student-item:last-child {
  border-bottom: none;
}

.student-name {
  font-weight: 500;
  color: #333;
}

.student-phone,
.student-gender {
  color: #666;
}

.operations {
  display: flex;
  justify-content: center;
}

.remove-btn {
  background: transparent;
  color: #dc3545;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>
